<template>
  <div class="app-container">
    <div>
      <el-date-picker
        v-model="queryParams.dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 36%"
        value-format="yyyy-MM-dd"
        clearable>

      </el-date-picker>
      <el-input
        placeholder="关键字"
        v-model="queryParams.sql"
        clearable style="width: 18%">
      </el-input>
      <el-button type="primary" @click="getList" icon="el-icon-searchsousuo">搜索</el-button>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        border
        style="width: 100% ; height:100%"
      >
        <el-table-column
          prop="id"
          label="编号"
          width="90px"
          sortable>
        </el-table-column>
        <el-table-column
          prop="bmbh"
          label="部门编号"
          sortable>
        </el-table-column>
        <el-table-column
          prop="name"
          label="操作人"
          width="200px"
          sortable>
        </el-table-column>
        <el-table-column
          prop="dh"
          label="电话"
          sortable>
        </el-table-column>
        <el-table-column
          prop="text"
          label="文本"
          sortable
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="time"
          label="时间"
          width="150px"
          sortable>
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script setup>

import {seleclog} from "@/api/system/Fdongbei/log";

export default {
  data() {
    return {
      tableData: {},
      queryParams:{
        dateRange: [],
        sql: '' // 初始化为一个空字符串
      }
    }
  },

  methods: {
    getList() {
  console.log()
      seleclog({date : this.queryParams.dateRange[0].toString(),date2:this.queryParams.dateRange[1].toString() , text : this.queryParams.sql}).then(response => {
         this.tableData = response.data
        }
      );
    },
  }
}
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 90vh; /* 使容器至少占满整个视口高度 */
}

.content {
  flex: 1; /* 使主要内容区域占据尽可能多的空间 */
}

.pagination-container .el-pagination {
  width: 100%;
}

.pagination-container {
  display: flex;
  width: 78%;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 16px; /* 可选，根据需要调整间距 */
  background-color: #ffffff; /* 可选，根据需要调整背景色 */
}
</style>
